<template>
  <!-- 底部tab栏 -->
  <footer class="footer">
    <van-tabbar
      v-model="active"
      active-color="#006699"
    >
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="search" to="/cate">分类</van-tabbar-item>
      <van-tabbar-item icon="cart-o" to="/cart">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/user">会员</van-tabbar-item>
    </van-tabbar>
  </footer>
</template>

<script>
export default {
  name: 'TabBar',
  data () {
    return {
      // 底部选中项
      active: 0
    }
  },
  created () {
    this.creatTabActive()
  },
  methods: {
    // tabbar高亮，需要获取路由路径的值来指定高亮tabitem
    creatTabActive () {
      let routerMap = {
        'home': 0,
        'cate': 1,
        'cart': 2,
        'user': 3
      }
      this.active = routerMap[this.$route.name]
    }
  }
}
</script>

<style lang="scss" scoped>
// 底部
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  font-size: 12px;
}
</style>
